<template> 
    <div class='sense'>
         <div :class="[{'gray':$store.state.buyflag}]" ></div>
         <div class='bug'><div :style="opacityStyle" ref="fixed" class='fix'><router-link tag="span" to="/"  class='iconfont icon-fanhui fixback'></router-link>景点详情</div></div>  
      <div class="nav" @click="showpic">
       
          <span  @click.stop="back" class='iconfont icon-fanhui back'></span>
          <img :src=" senseData.bannerImg " alt="">
          <div class="navinfo">
              <div  class="title">
                 {{ senseData.sightName }}
              </div>
              <div class="num"> <span class='iconfont numicon'>&#xe616;</span>  {{ picData.length }} </div>
          </div>
      </div>
     <bannerinfo></bannerinfo>
      <myanimation>
      <pic :imgData='picData' @open='light' v-if="ispic"></pic>
      </myanimation>
      <div class="ty">
          <picket @okbook='send' :ticket='picketData'></picket>
          <mycomment></mycomment>
      </div>
      <mybuy :sonitem='item' v-show="$store.state.buyflag"></mybuy>
    </div>
   
</template>


<script>
import pic from './pic'
import picket from './picket'
import axios from 'axios'
import myanimation from './animation'
import bannerinfo from './banner'
import mycomment from './comment'
import mybuy from './buy'
    export default{
        name:'sense',
        data(){
            return{
                ispic:false,
                opacityStyle:{
                        opacity:0
                              },
                senseData:[],
                picData:[],
                picketData:[],
                item:{}
            }
        },
        components:{
            pic,
            picket,
            myanimation,
            bannerinfo,
            mycomment,
            mybuy
        },
        methods:{
            getData(){
                axios.get('/api/detail.json',{
                    params:{ id:this.$route.params.id}       
                }).then(result=>{
                    this.picData=result.data.data.gallaryImgs
                    this.picketData=result.data.data.categoryList
                    this.senseData=result.data.data
                })
            },
            back(){
                document.removeEventListener('scroll',this.scroll)
                this.$router.go(-1)
            },
            showpic(){
                this.ispic=true;
                console.log(111)
            },
            light(){
                 this.ispic=false;
            },
            scroll(){
                var scrollPosition = ''             
               scrollPosition= document.documentElement.scrollTop      
                if(scrollPosition>=60 && scrollPosition<=140){      
                     this.opacityStyle={
                         opacity:(parseInt(scrollPosition))/140
                     }         
                }
                if(scrollPosition>140){
                      this.opacityStyle={
                         opacity:1
                     }         
                }
                else{
                     this.opacityStyle={
                         opacity:(parseInt(scrollPosition))/140||0
                     }         
                }                
            },
            send(item){
                this.item=item
            }
            
        },
        activated() {
            // document.addEventListener('scroll',this.scroll)
            // console.log(222)
        },
        deactivated() {
            // document.removeEventListener('scroll',this.scroll)
        },
        mounted() {
            this.getData()
            this.send()
          document.addEventListener('scroll',this.scroll)
          this.$store.commit('changbuyflag',false)
        }
        
       
    }
</script>


<style lang="scss" scoped>
.numicon{
     font-size: .18rem;
}
.bug{
    position: absolute;
}
 .gray{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 90;
    background: rgba(0,0,0,.5);
 }
.sense{
    .fix{
        width: 100%;
        position: fixed;
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: center;
        background-color: #16BFC7;
        opacity: 0;
        z-index: 6;
        font-size: 0.32rem;
        color: #fff;
        .fixback{
            position: absolute;
            color: #fff;
            left: 0.2rem;
            }
        }
    .nav{
         width: 100%;
          height: 55vw;
        background-color: #ccc;   
        position: relative;
        .back{
             text-align: center;
            width: 0.4rem;
            height: 0.4rem;
            line-height: 0.4rem;
            position: absolute;
            top: 0.28rem;
            left: 0.28rem;
            background-color: rgba(0,0,0,0.8);
            border-radius: 48%;
            color: #ccc;   
            z-index: 10;
        }
        img{
            width: 100%;
        }
        .navinfo{
            width: 100%;
            position: absolute;
            bottom: 0.3rem;
            display: flex;     
            color: green;
            justify-content: space-between;
            align-items: center;
            background-image: linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.5));
            .title{
                font-size: .36rem;
                height: .4rem;
                line-height: .4rem;
                color: #fff;
                padding-left: 0.3rem;
            }
            .num{
                 font-size: .18rem;
                height: .4rem;
                line-height: .4rem;
                color: #fff;
                padding-right: 0.2rem;
            }
        }
    }
    .ty{
        height: 50rem;
        background-color: #ccc;
        width: 100%;
    }
}
</style>

